<!-- eslint-disable vue/no-deprecated-html-element-is -->
<template name="skeleton">
  <view class="sk-container">
    <view class="viewport">
      <view class="search">
        <view class="input">
          <text
            class="icon-search sk-transparent sk-text-14-2857-694 sk-text sk-pseudo sk-pseudo-circle"
          >
            女靴
          </text>
        </view>
      </view>
      <view class="categories">
        <scroll-view :scroll-y="true" class="primary">
          <view class="item active sk-pseudo sk-pseudo-circle">
            <text class="name sk-transparent sk-text-14-2857-456 sk-text">居家</text>
          </view>
          <view class="item sk-pseudo sk-pseudo-circle">
            <text class="name sk-transparent sk-text-14-2857-149 sk-text">美食</text>
          </view>
          <view class="item sk-pseudo sk-pseudo-circle">
            <text class="name sk-transparent sk-text-14-2857-130 sk-text">服饰</text>
          </view>
          <view class="item sk-pseudo sk-pseudo-circle">
            <text class="name sk-transparent sk-text-14-2857-632 sk-text">母婴</text>
          </view>
          <view class="item sk-pseudo sk-pseudo-circle">
            <text class="name sk-transparent sk-text-14-2857-49 sk-text">个护</text>
          </view>
          <view class="item sk-pseudo sk-pseudo-circle">
            <text class="name sk-transparent sk-text-14-2857-477 sk-text">严选</text>
          </view>
          <view class="item sk-pseudo sk-pseudo-circle">
            <text class="name sk-transparent sk-text-14-2857-920 sk-text">数码</text>
          </view>
          <view class="item sk-pseudo sk-pseudo-circle">
            <text class="name sk-transparent sk-text-14-2857-490 sk-text">运动</text>
          </view>
          <view class="item sk-pseudo sk-pseudo-circle">
            <text class="name sk-transparent sk-text-14-2857-331 sk-text">杂项</text>
          </view>
        </scroll-view>
        <scroll-view :scroll-y="true" class="secondary" scroll-top="0">
          <view is="components/XtxSwiper" class="banner">
            <view class="carousel XtxSwiper--carousel">
              <swiper :autoplay="false" :circular="true" :interval="3000" :current="0"></swiper>
              <view class="indicator XtxSwiper--indicator">
                <text class="dot XtxSwiper--dot"></text>
                <text class="dot XtxSwiper--dot"></text>
                <text class="dot XtxSwiper--dot"></text>
                <text class="dot XtxSwiper--dot"></text>
                <text class="dot XtxSwiper--dot active XtxSwiper--active"></text>
              </view>
            </view>
          </view>
          <view class="panel">
            <view class="title">
              <text class="name sk-transparent sk-text-26-6667-430 sk-text">居家生活用品</text>
              <navigator
                class="more sk-transparent sk-text-30-0000-325 sk-text sk-pseudo sk-pseudo-circle"
                hover-class="none"
              >
                全部
              </navigator>
            </view>
            <view class="section">
              <navigator class="goods" hover-class="none">
                <image class="image sk-image"></image>
                <view class="name ellipsis sk-transparent sk-text-14-2857-890 sk-text">
                  飞天53%vol500ml贵州茅台酒（带杯）
                </view>
                <view class="price">
                  <text class="symbol sk-transparent sk-opacity">¥</text>
                  <text class="number sk-transparent sk-text-14-2857-130 sk-text">1499.00</text>
                </view>
              </navigator>
              <navigator class="goods" hover-class="none">
                <image class="image sk-image"></image>
                <view class="name ellipsis sk-transparent sk-text-14-2857-287 sk-text">
                  地道卤香好味道，桂林鲜米粉245克*6盒
                </view>
                <view class="price">
                  <text class="symbol sk-transparent sk-opacity">¥</text>
                  <text class="number sk-transparent sk-text-14-2857-315 sk-text">69.00</text>
                </view>
              </navigator>
              <navigator class="goods" hover-class="none">
                <image class="image sk-image"></image>
                <view class="name ellipsis sk-transparent sk-text-14-2857-368 sk-text">
                  苏格兰陈年单一麦芽威士忌700毫升
                </view>
                <view class="price">
                  <text class="symbol sk-transparent sk-opacity">¥</text>
                  <text class="number sk-transparent sk-text-14-2857-488 sk-text">318.00</text>
                </view>
              </navigator>
              <navigator class="goods" hover-class="none">
                <image class="image sk-image"></image>
                <view class="name ellipsis sk-transparent sk-text-14-2857-46 sk-text">
                  玛歌正牌干红750毫升2017年
                </view>
                <view class="price">
                  <text class="symbol sk-transparent sk-opacity">¥</text>
                  <text class="number sk-transparent sk-text-14-2857-459 sk-text">6699.00</text>
                </view>
              </navigator>
              <navigator class="goods" hover-class="none">
                <image class="image sk-image"></image>
                <view class="name ellipsis sk-transparent sk-text-14-2857-212 sk-text">
                  下饭神器酸豆角50克*10袋
                </view>
                <view class="price">
                  <text class="symbol sk-transparent sk-opacity">¥</text>
                  <text class="number sk-transparent sk-text-14-2857-577 sk-text">16.00</text>
                </view>
              </navigator>
              <navigator class="goods" hover-class="none">
                <image class="image sk-image"></image>
                <view class="name ellipsis sk-transparent sk-text-14-2857-328 sk-text">
                  无芯软糯的萌妹子，建宁莲子228克
                </view>
                <view class="price">
                  <text class="symbol sk-transparent sk-opacity">¥</text>
                  <text class="number sk-transparent sk-text-14-2857-902 sk-text">45.00</text>
                </view>
              </navigator>
              <navigator class="goods" hover-class="none">
                <image class="image sk-image"></image>
              </navigator>
              <navigator class="goods" hover-class="none">
                <image class="image sk-image"></image>
              </navigator>
              <navigator class="goods" hover-class="none">
                <image class="image sk-image"></image>
              </navigator>
            </view>
          </view>
        </scroll-view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
  @use '@/components/styles/XtxSwiper.scss';
  @use '@/pages/category/styles/category.scss';
  .sk-transparent {
    color: transparent !important;
  }
  .sk-text-14-2857-694 {
    background-image: linear-gradient(
      transparent 14.2857%,
      #eeeeee 0%,
      #eeeeee 85.7143%,
      transparent 0%
    ) !important;
    background-size: 100% 39.2rpx;
    position: relative !important;
  }
  .sk-text {
    background-origin: content-box !important;
    background-clip: content-box !important;
    background-color: transparent !important;
    color: transparent !important;
    background-repeat: repeat-y !important;
  }
  .sk-text-14-2857-456 {
    background-image: linear-gradient(
      transparent 14.2857%,
      #eeeeee 0%,
      #eeeeee 85.7143%,
      transparent 0%
    ) !important;
    background-size: 100% 36.4rpx;
    position: relative !important;
  }
  .sk-text-14-2857-149 {
    background-image: linear-gradient(
      transparent 14.2857%,
      #eeeeee 0%,
      #eeeeee 85.7143%,
      transparent 0%
    ) !important;
    background-size: 100% 36.4rpx;
    position: relative !important;
  }
  .sk-text-14-2857-130 {
    background-image: linear-gradient(
      transparent 14.2857%,
      #eeeeee 0%,
      #eeeeee 85.7143%,
      transparent 0%
    ) !important;
    background-size: 100% 36.4rpx;
    position: relative !important;
  }
  .sk-text-14-2857-632 {
    background-image: linear-gradient(
      transparent 14.2857%,
      #eeeeee 0%,
      #eeeeee 85.7143%,
      transparent 0%
    ) !important;
    background-size: 100% 36.4rpx;
    position: relative !important;
  }
  .sk-text-14-2857-49 {
    background-image: linear-gradient(
      transparent 14.2857%,
      #eeeeee 0%,
      #eeeeee 85.7143%,
      transparent 0%
    ) !important;
    background-size: 100% 36.4rpx;
    position: relative !important;
  }
  .sk-text-14-2857-477 {
    background-image: linear-gradient(
      transparent 14.2857%,
      #eeeeee 0%,
      #eeeeee 85.7143%,
      transparent 0%
    ) !important;
    background-size: 100% 36.4rpx;
    position: relative !important;
  }
  .sk-text-14-2857-920 {
    background-image: linear-gradient(
      transparent 14.2857%,
      #eeeeee 0%,
      #eeeeee 85.7143%,
      transparent 0%
    ) !important;
    background-size: 100% 36.4rpx;
    position: relative !important;
  }
  .sk-text-14-2857-490 {
    background-image: linear-gradient(
      transparent 14.2857%,
      #eeeeee 0%,
      #eeeeee 85.7143%,
      transparent 0%
    ) !important;
    background-size: 100% 36.4rpx;
    position: relative !important;
  }
  .sk-text-14-2857-331 {
    background-image: linear-gradient(
      transparent 14.2857%,
      #eeeeee 0%,
      #eeeeee 85.7143%,
      transparent 0%
    ) !important;
    background-size: 100% 36.4rpx;
    position: relative !important;
  }
  .sk-text-26-6667-430 {
    background-image: linear-gradient(
      transparent 26.6667%,
      #eeeeee 0%,
      #eeeeee 73.3333%,
      transparent 0%
    ) !important;
    background-size: 100% 60rpx;
    position: relative !important;
  }
  .sk-text-30-0000-325 {
    background-image: linear-gradient(
      transparent 30%,
      #eeeeee 0%,
      #eeeeee 70%,
      transparent 0%
    ) !important;
    background-size: 100% 60rpx;
    position: relative !important;
  }
  .sk-text-14-2857-890 {
    background-image: linear-gradient(
      transparent 14.2857%,
      #eeeeee 0%,
      #eeeeee 85.7143%,
      transparent 0%
    ) !important;
    background-size: 100% 30.8rpx;
    position: relative !important;
  }
  .sk-opacity {
    opacity: 0 !important;
  }
  .sk-text-14-2857-287 {
    background-image: linear-gradient(
      transparent 14.2857%,
      #eeeeee 0%,
      #eeeeee 85.7143%,
      transparent 0%
    ) !important;
    background-size: 100% 30.8rpx;
    position: relative !important;
  }
  .sk-text-14-2857-315 {
    background-image: linear-gradient(
      transparent 14.2857%,
      #eeeeee 0%,
      #eeeeee 85.7143%,
      transparent 0%
    ) !important;
    background-size: 100% 33.6rpx;
    position: relative !important;
  }
  .sk-text-14-2857-368 {
    background-image: linear-gradient(
      transparent 14.2857%,
      #eeeeee 0%,
      #eeeeee 85.7143%,
      transparent 0%
    ) !important;
    background-size: 100% 30.8rpx;
    position: relative !important;
  }
  .sk-text-14-2857-488 {
    background-image: linear-gradient(
      transparent 14.2857%,
      #eeeeee 0%,
      #eeeeee 85.7143%,
      transparent 0%
    ) !important;
    background-size: 100% 33.6rpx;
    position: relative !important;
  }
  .sk-text-14-2857-46 {
    background-image: linear-gradient(
      transparent 14.2857%,
      #eeeeee 0%,
      #eeeeee 85.7143%,
      transparent 0%
    ) !important;
    background-size: 100% 30.8rpx;
    position: relative !important;
  }
  .sk-text-14-2857-459 {
    background-image: linear-gradient(
      transparent 14.2857%,
      #eeeeee 0%,
      #eeeeee 85.7143%,
      transparent 0%
    ) !important;
    background-size: 100% 33.6rpx;
    position: relative !important;
  }
  .sk-text-14-2857-212 {
    background-image: linear-gradient(
      transparent 14.2857%,
      #eeeeee 0%,
      #eeeeee 85.7143%,
      transparent 0%
    ) !important;
    background-size: 100% 30.8rpx;
    position: relative !important;
  }
  .sk-text-14-2857-577 {
    background-image: linear-gradient(
      transparent 14.2857%,
      #eeeeee 0%,
      #eeeeee 85.7143%,
      transparent 0%
    ) !important;
    background-size: 100% 33.6rpx;
    position: relative !important;
  }
  .sk-text-14-2857-328 {
    background-image: linear-gradient(
      transparent 14.2857%,
      #eeeeee 0%,
      #eeeeee 85.7143%,
      transparent 0%
    ) !important;
    background-size: 100% 30.8rpx;
    position: relative !important;
  }
  .sk-text-14-2857-902 {
    background-image: linear-gradient(
      transparent 14.2857%,
      #eeeeee 0%,
      #eeeeee 85.7143%,
      transparent 0%
    ) !important;
    background-size: 100% 33.6rpx;
    position: relative !important;
  }
  .sk-image {
    background: #efefef !important;
  }
  .sk-pseudo::before,
  .sk-pseudo::after {
    background: #efefef !important;
    background-image: none !important;
    color: transparent !important;
    border-color: transparent !important;
  }
  .sk-pseudo-rect::before,
  .sk-pseudo-rect::after {
    border-radius: 0 !important;
  }
  .sk-pseudo-circle::before,
  .sk-pseudo-circle::after {
    border-radius: 50% !important;
  }
  .sk-container {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: transparent;
  }
</style>
